<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";

// 使用useRoute获取当前路由的信息，以便在组件中访问路由参数和查询等
const route = useRoute();

// 使用useRouter获取路由器实例，允许在组件中执行导航操作
const router = useRouter();
</script>
<template>
  <div class="detail">
    <h1>文章详情页</h1>
    <!-- 显示当前文章的id -->
    <p>当前文章的id：{{ route.params }}</p>
    <!-- 返回首页的按钮 -->
    <button @click="router.push('/')">返回首页</button>
  </div>
</template>
<style>
.detail {
  width: 100%;
  height: 200px;
  background-color: pink;
  position: absolute;
  bottom: 0;
}
</style>
